<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- Header -->
<header id="top">
<div class="wrapper">
	<!-- Title/Logo - can use text instead of image -->
	<div id="title">
		<img SRC="${ctx }/img/logo.png" alt="Administry" />
		<!--<span>Administry</span> demo-->
	</div>
	<!-- Top navigation -->
	<div id="topnav">
		<a href="#"><img class="avatar" SRC="${ctx }/img/user_32.png"
				alt="" />
		</a>
		<div class="welcome">
			欢迎您！
			<b><s:property value="#session.login_user.username" /></b>
			<span>|</span>
			<a href="#userInfo" class="nyroModal" >设置</a>
			<span>|</span>
			<a href="#confirm" onclick="setUrl('loginOpt!loginout.do','注销');" class="nyroModal">注销</a>
		</div>
	</div>
	<!-- End of Top navigation -->
	<!-- Main navigation -->
	<nav id="menu">
	<ul class="sf-menu">
		<li id="travelNav">
			<a HREF="${ctx }/pages/travelAgencyInfo/travelOpt!travelList.do">登记旅行社信息</a>
		</li>
		<li id="prepareNav">
			<a HREF="${ctx }/pages/prepareInfo/prepareOpt!basicList.do">录入基本信息</a>
		</li>
		<li id="userNav">
			<a HREF="${ctx }/pages/userInfo/userOpt!userList.do">员工信息</a>
		</li>
	</ul>
	</nav>
	<!-- End of Main navigation -->

</div>
</header>
<!-- End of Header -->

<script type="text/javascript">
	/** 导航栏选中 */
	$(document).ready(function(){
	
		var nav_names= new Array('travelNav','prepareNav','userNav');
		var nav_locations= new Array('pages/travelAgencyInfo','pages/prepareInfo','pages/userInfo');
		
		var localhref = window.location.href ;
		for( var  index = 0 ; index < nav_locations.length; index++ ){
			if( localhref.indexOf(nav_locations[index])> 0 ){
				document.getElementById(nav_names[index]).className="current";
				break;
			}
		}
	});
	
	
var url;
var opt;
function setUrl(urlPass,optPass){
	url = urlPass;
	opt = optPass;
	$("#opt").html("『" + opt + "』");
}
function go(){
	window.location.href = url;
}
$(document).ready(function(){
	
	/* setup navigation, content boxes, etc... */
	Administry.setup();
	
	// validate form on keyup and submit
	var validator = $("#updateUserInfoForm").validate({
		rules: {
			"username": {
				required: true,
				minlength: 2
			},
			"userDetail.email": {
				required: true,
				email: true
			},
			"userDetail.mobile": {
				required: true
			}
		},
		messages: {
			"username": {
				required: "请输入用户名",
				minlength: jQuery.format("最少输入{0}个字")
			},
			"userDetail.email": {
				required: "请输入合法邮箱",
				email:"请输入合法邮箱"
				//minlength: "请输入合法邮箱"
			},
			"userDetail.mobile": {
				required: "请输入手机号码"
			}
			
		},
		// the errorPlacement has to take the layout into account
		errorPlacement: function(error, element) {
			error.insertAfter(element.parent().find('label:first'));
		},
		// specifying a submitHandler prevents the default submit, good for the demo
		//submitHandler: function() {
		//	alert("Data submitted!");
		//},
		// set new class to error-labels to indicate valid fields
		success: function(label) {
			// set &nbsp; as text for IE
			label.html("&nbsp;").addClass("ok");
		}
	});
	
	
	// validate form on keyup and submit
	var validator = $("#updatePwdForm").validate({
		rules: {
			"passwordOld": {
				required: true,
				minlength: 5
			},
			"password": {
				required: true,
				minlength: 5
			},
			"passwordConfirm": {
				required: true,
				minlength: 5,
				equalTo: "#password"
			}
		},
		messages: {
			"passwordOld": {
				required: "请输入原密码",
				minlength: jQuery.format("最少输入{0}个字符")
			},
			"password": {
				required: "请输入新密码",
				minlength: jQuery.format("最少输入{0}个字符")
				//minlength: "请输入合法邮箱"
			},
			"passwordConfirm": {
				required: "请输入确认新密码",
				minlength: jQuery.format("最少输入{0}个字符"),
				equalTo: "两次输入的密码不一致"
			}
			
		},
		// the errorPlacement has to take the layout into account
		errorPlacement: function(error, element) {
			error.insertAfter(element.parent().find('label:first'));
		},
		// specifying a submitHandler prevents the default submit, good for the demo
		//submitHandler: function() {
		//	alert("Data submitted!");
		//},
		// set new class to error-labels to indicate valid fields
		success: function(label) {
			// set &nbsp; as text for IE
			label.html("&nbsp;").addClass("ok");
		}
	});

});

</script>
<!-- start：弹出修改用户信息框 -->
<div id="userInfo" style='padding: 15px 15px 0px 15px;;display: none;'>
	<div style="width:140px;height:350px;padding-top:25px;padding-left:15px;border-right:1px solid gray; float:left;">	
    	<img class="avatar" SRC="${ctx }/img/user_32.png" alt="" width="100" height="100" />
        <p class="ta-left">
        	<span style="cursor:pointer;" class="label label-silver" title="查看用户信息"
        		onClick="$('#updateUserInfo').hide();$('#updatePwd').hide();$('#scanInfo').slideDown(); return false;">
        		账号：<s:property value="#session.login_user.userid" />
        	</span>
        </p>
        <p class="ta-left">
        	<span style="cursor:pointer;" class="label label-green" title="修改密码" 
        		onClick="$('#updateUserInfo').hide();$('#scanInfo').hide();$('#updatePwd').slideDown(); return false;">修改密码</span>
        </p>
        <p class="ta-left">
        	<span style="cursor:pointer;" class="label label-gold" title="修改基本信息"
        		onClick="$('#updatePwd').hide();$('#scanInfo').hide();$('#updateUserInfo').slideDown(); return false;">修改基本信息</span>
        </p>
    </div>
	
	
	<!-- start：查看用户信息 -->
    <div id ="scanInfo" style="padding:10px 20px 10px 30px; float:left;width:400px;">
						<fieldset>
							<legend>用户详细信息</legend>
								<table class="no-style" width="100%">
									<tbody>
										<tr>
											<td><p>账号：<s:property value='#session.login_user.userid'/></p></td>
											<td><p>用户名：<s:property value='#session.login_user.username'/></p></td>
											<td>
												<p>
													性别：
													<s:if test="#session.login_user.userDetail.sexual == 1">
														男
													</s:if>	
													<s:if test="#session.login_user.userDetail.sexual == 0">
														女
													</s:if>
												</p>		
											</td>
										</tr>
										<tr>
											<td><p>部门：<s:property value='#session.login_user.userDetail.title'/></p></td>
											<td>
												<p>
													是否有登陆权限：
													<s:if test="#session.login_user.suspend == 1">
														有
													</s:if>	
													<s:if test="#session.login_user.suspend == 0">
														无
													</s:if>	
												</p>	
											</td>
											<td>
												权限：
												<s:if test="#session.login_user.permission == 1">
													管理员
												</s:if>	
												<s:if test="#session.login_user.permission == 2">
													财务
												</s:if>	
												<s:if test="#session.login_user.permission == 3">
													前台
												</s:if>		
											</td>
										</tr>
										<tr>
											<td colspan="3"><p>手机号码：<s:property value='#session.login_user.userDetail.mobile'/></p></td>
										</tr>
										<tr>
											<td colspan="3"><p>Email：<s:property value='#session.login_user.userDetail.email'/></p></td>
										</tr>
										<tr>
											<td><p><span title="此帐号由哪个管理员创建">创建者：<s:property value='#session.login_user.createUser'/></span></p></td>
											<td colspan="2">
												<p>
													创建时间：<s:date name="#session.login_user.createTime" format="yyyy-MM-dd HH:mm:ss" />
												</p>
											</td>
										</tr>
										<tr>
											<td colspan="3"><p>最后一次登录时间：<s:date name="#session.login_user.lastLoginTime" format="yyyy-MM-dd HH:mm:ss" /></p></td>
										</tr>
									</tbody>
								</table>
							<p class="box"><input type="button" class="btn nyroModalClose" value="返回"/></p>
						</fieldset>

    </div>
    <!-- end：查看用户信息 -->
    
    <!-- start：修改用户信息 -->
    <div id ="updateUserInfo" style="padding:10px 20px 10px 30px; float:left;width:400px;display: none;">
    	<form id="updateUserInfoForm" method="post" action="userOpt!updateUserInfo.do">

						<fieldset>
							<legend>修改用户信息</legend>

							<p>
								<label class="required" for="username">用户名：</label><br/>
								<input type="text" id="username" class="full" 
									value="<s:property value='#session.login_user.username'/>" name="username"/>
								
							</p>
							
							<p>
								<label for="sexual">性别</label><br/>
								<select id="sexual" class="half" name="userDetail.sexual">
									<option value="0" <s:if test="#session.login_user.userDetail.sexual == 0"> selected </s:if> >女</option>
									<option value="1" <s:if test="#session.login_user.userDetail.sexual == 1"> selected </s:if> >男</option>
								</select>
							</p>
							
							<p>
								<label class="required" for="email">Email：</label><br/>
								<input type="text" id="email" class="full" 
									value="<s:property value='#session.login_user.userDetail.email'/>" name="userDetail.email"/>
							</p>

							<p>
								<label class="required" for="mobile">手机：</label><br/>
								<input type="text" id="mobile" class="full" 
									value="<s:property value='#session.login_user.userDetail.mobile'/>" name="userDetail.mobile"/>
							</p>

							<p class="box"><input type="submit" class="btn btn-green big" value="修改"/> or <input type="reset" class="btn" value="重置"/></p>

						</fieldset>

		</form>
    </div>
    <!-- start：修改用户信息 -->
    
    <!-- start：修改密码 -->
    <div id ="updatePwd" style="padding:10px 20px 10px 30px;width:400px;float:left;display: none;">
    	<form id="updatePwdForm" method="post" action="userOpt!updatePwd.do">

						<fieldset>
							<legend>修改密码</legend>

							<p>
								<label class="required" for="passwordOld">原密码：</label><br/>
								<input type="password" id="passwordOld" class="full"  name="passwordOld"/>
								
							</p>
							
							<p>
								<label class="required" for="password">新密码：</label><br/>
								<input type="password" id="password" class="full" name="password"/>
							</p>

							<p>
								<label class="required" for="passwordConfirm">确认新密码：</label><br/>
								<input type="password" id="passwordConfirm" class="full" name="passwordConfirm"/>
							</p>

							<p class="box"><input type="submit" class="btn btn-green big" value="修改"/> or <input type="reset" class="btn" value="重置"/></p>

						</fieldset>

		</form>
    </div>
    <!-- end：修改密码 -->
	
</div>
<!-- end：弹出修改用户信息框 -->

<!-- start: 弹出确认框 -->
<div id="confirm" style="display:none;">
	<div class="box box-info">提示</div>
	<div style="padding:35px 0px 35px 10px;">确认要执行<span id="opt"></span>操作？</div>
	<p class="box">
		<a href="#" class="btn" onclick="go();"><span class="icon icon-ok">&nbsp;</span>确认</a>
		<a href="#" class="btn nyroModalClose" ><span class="icon icon-cancel">&nbsp;</span>取消</a>
	</p>
</div>
<!-- end: 弹出确认框 -->
